<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户信息编辑页</title>
    <link th:include="fragment/import :: import">
</head>
<body style="padding: 20px">

<form class="layui-form" id="mainForm" th:action="@{/admin/user/{action}(action=${action})}"
      th:method="post" th:object="${user}">
    <input name="user.id" th:value="*{id}" type="hidden"/>
    <input name="registrationDate" th:value="*{registrationDate}" type="hidden"/>
    <div class="layui-form-item">
        <label class="layui-form-label recommend-because">用户名：</label>
        <div class="layui-input-block">
            <input autocomplete="off" class="layui-input" lay-verify="required" name="loginName" required
                   th:field="*{loginName}" type="text">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label label-width-auto">姓名：</label>
        <div class="layui-input-block">
            <input autocomplete="off" class="layui-input" lay-verify="required" name="realName" required th:field="*{realName}"
                   type="text">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label label-width-auto">密码框：</label>
        <div class="layui-input-block">
            <input autocomplete="off" class="layui-input" lay-verify="required" name="password" required
                   th:field="*{password}" type="text">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label label-width-auto">角色：</label>
        <div class="layui-input-block">
            <input name="roleIdStr" th:value="*{roleIdStr}" type="hidden">
            <input lay-filter="role" th:each="role, iterStat:${roleDTOList}" th:title="${role.name}"
                   th:value="${role.id}" type="checkbox">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-filter="formDemo" lay-submit>立即提交</button>
            <button class="layui-btn layui-btn-primary" type="reset">重置</button>
        </div>
    </div>
</form>

<script>
    //Demo

    layui.use('form', function () {
        var form = layui.form;
        initValue();

        //监听提交
        form.on('submit(formDemo)', function (data) {
            //刷新父页面
            window.parent.location.reload();//刷新父页面
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            parent.layer.close(index);
        });

        //监听复选框
        form.on('checkbox(role)', function (data) {
            var number = $('input[name="roleIdStr"]'), value = data.value, array = number.val().split(",");
            if (data.elem.checked) {
                number.val(number.val() + value + ",");
            } else {
                var newnumber = "";
                for (var i = 0; i < array.length; i++) {
                    var str = array[i];
                    newnumber += (str !== value && str !== "" && str != null) ? str + "," : "";
                }
                number.val(newnumber);
            }
        });

        //input 框初始 赋值 到checkedbox上
        function initValue() {
            var param = $("input[name='roleIdStr']").val(), checkBoxs = $("input[type='checkbox']"),
                array = param.split(",");
            for (var i = 0; i < array.length; i++) {
                for (var j = 0; j < checkBoxs.length; j++) {
                    var checkbox = $(checkBoxs[j]);
                    if (checkbox.val() === array[i]) {
                        checkbox.attr('checked', 'checked');
                        break;
                    }
                }
            }
            form.render('checkbox');
        }


    });

</script>

</body>
</html>